<template>
<div class="col-md-12">
  <record-room-detail></record-room-detail>
  <my-navbar>
    <template slot="right">  
      <button class="btn btn-default" @click.prevent="onAdd">
        <span class="glyphicon glyphicon-plus"></span> {{$t('common.add')}}
      </button>
      <button class="btn btn-default" @click.prevent="onRefresh">
        <span class="glyphicon glyphicon-refresh"></span> {{$t('common.refresh')}}
      </button>          
    </template> 
  </my-navbar>  
  <div class="col-md-12">
    <my-table :cfg="cfg" 
      :list="room.list" 
      :loading="room.loading"></my-table>
  </div>
</div>
</template>

<script>
import _ from 'lodash'
import ebus from 'libs/ebus.js'
import toast from 'libs/toast.js'
import msgbox from 'libs/msgbox.js'
import {printObj} from 'libs/utils.js'
import locales from '../locales/recordRoom.js'
import RecordRoomDetail from './RecordRoomDetail.vue'
import {List} from '../configs/recordRoom.js'
import * as actions from 'share/server/vuex/actions/media.js'
import {mediaApi} from 'share/server/api.js'

export default {
  locales,
  components: {
    'record-room-detail': RecordRoomDetail,
  },
  vuex: {
    getters: {
      room: (state) => state.record.room,
    },
    actions
  },
  data () {
    return {
      cfg: {
        checkable: false,
        showHead: true,
        columns: new List(this),
        operation: {
          name: this.$t("common.operation"),
          width: 'auto',
          actions: [{
            icon: 'glyphicon glyphicon-trash',
            doClick: this.onDel
          }, {
            icon: 'glyphicon glyphicon-edit',
            doClick: this.onShowDetail
          }, {
            icon: 'glyphicon glyphicon-play',
            isShow: this.isStartRecordShow,
            doClick: this.onStartRecord
          }, {
            icon: 'glyphicon glyphicon-stop',
            isShow: this.isStopRecordShow,
            doClick: this.onStopRecord
          }]
        }     
      }
    }
  },
  methods: {
    onAdd () {
      this.onShowDetail({
        _id: -1,
        roomName: 'default',
        scene: '',
        windowList: '',
        status: '',
        topoIdOfMediaDev: -1
      })
    },
    onShowDetail (item) {
      ebus.emit('show-record-room-detail', item)
    },
    onRefresh () {
      this.doLoadRecordRooms()
    },
    onDel (item) {
      msgbox.alert({
        title: this.$t('alert.areYouSure'),
        text: this.$t('alert.notBeRecovered'),
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        cancelButtonText: this.$t('common.cancel'),
        confirmButtonText: this.$t('common.confirm'),
        closeOnConfirm: false        
      }, 
      function() {
        mediaApi.sendCmd('removeRoom', {_id: item._id}).then(function(res) {
          if (res && res.data && res.data.code === 0) {
            this.doLoadRecordRooms()
          } else {
            toast.code(this, res.data)
          }
          msgbox.close()
        }.bind(this))
      }.bind(this))
    },
    doRecordOp (action, roomId) {
      mediaApi.sendCmd(action, {_id: roomId}).then(function(res) {
        if (res && res.data && res.data.code === 0) {
          this.doLoadRecordRooms()
        } else {
          toast.code(this, res.data)
        }        
      }.bind(this))      
    },
    isStartRecordShow (item) {
      if ((item.status === 'toStop')
        || (item.status === 'stoped')) {
        return true
      } else {
        return false
      }
    },
    isStopRecordShow (item) {
      if ((item.status === 'toStart')
        || (item.status === 'recording')) {
        return true
      } else {
        return false
      }
    },
    onStartRecord (item) {
      this.doRecordOp('startRecord', item._id)
    },
    onStopRecord (item) {
      this.doRecordOp('stopRecord', item._id)
    }
  }
}
</script>

<style>
</style>